<template>
  <div class="add">
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
   <el-form-item label="活动标题" prop="sharingTitle" >
    <el-input v-model="ruleForm.sharingTitle" placeholder="请输入知识分享活动标题" ></el-input>
  </el-form-item>
  <el-form-item label="活动副标题" prop="sharingSubtitle" >
    <el-input v-model="ruleForm.sharingSubtitle" placeholder="请输入知识分享活动副标题" ></el-input>
  </el-form-item>
  <el-form-item label="活动简介" prop="sharingIntroduce" >
    <el-input v-model="ruleForm.sharingIntroduce" placeholder="请选择知识分享活动简介" ></el-input>
  </el-form-item>
  <el-form-item label="活动内容" prop="sharingContent" >
    <!-- <el-input v-model="ruleForm.name" placeholder="请选择活动内容" ></el-input> -->
    <div class="edit_container">
        <quill-editor 
            v-model="ruleForm.sharingContent" 
            ref="myQuillEditor" 
            :options="editorOption" 
            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
            @change="onEditorChange($event)">
        </quill-editor>
    </div>
  </el-form-item>
  <el-form-item label="活动标记" prop="sharingSign" >
    <el-input v-model="ruleForm.sharingSign" placeholder="请选择活动标记" ></el-input>
  </el-form-item>
  <el-form-item label="活动封面">
        <el-upload
          class="upload-demo"
          :action="baseUrl + '/common/upload'"
          :headers="headers"
          :show-file-list="false"
          :on-success="aaa"
        >
          <div class="el-upload__text">
            <i v-if="!ruleForm.coverUrl" class="el-icon-upload"></i>
            <img v-else :src="baseUrl + ruleForm.coverUrl" alt="" />
          </div>
        </el-upload>
      </el-form-item>
  <el-form-item label="邀请嘉宾" prop="honouredGuest">
    <el-input  v-model="ruleForm.honouredGuest" placeholder="请输入邀请嘉宾"></el-input>
  </el-form-item>
  <el-form-item label="是否发布" prop="isRelease">
        <el-radio-group v-model="ruleForm.isRelease">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
          
        </el-radio-group>
      </el-form-item>
  <el-form-item label="是否外链" prop="isLink">
    <el-radio-group v-model="ruleForm.isLink">
      <el-radio label="是"></el-radio>
      <el-radio label="否"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="作者" prop="author">
    <el-input  v-model="ruleForm.author" placeholder="请输入作者"></el-input>
  </el-form-item>
  <el-form-item label="链接" prop="link">
    <el-input type="textarea" v-model="ruleForm.link" placeholder="请输入内容"></el-input>
  </el-form-item>
  <el-form-item label="备注" prop="remark">
    <el-input type="textarea" v-model="ruleForm.remark" placeholder="请输入内容"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
    <el-button @click="resetForm('ruleForm')">取消</el-button>
  </el-form-item>
  </el-form>
  </div>
</template>
<!-- <script src="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/index.min.js"></script> -->
<script>
// <link href="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet"></link>
//  var E = window.wangEditor;
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { getToken } from "../../../utils/auth";
import { addKnowledge,uptKnowledge } from "../../../api/api/api";
export default {
    name:'add',

    components: {
        quillEditor
    },
    created(){
      
      if(this.$route.query.row){
        this.update()
      }else if(this.$route.query.ro){
        this.updat();
      }
    },
     data() {
      return {
            baseUrl: process.env.VUE_APP_BASE_API,
      headers: {
        Authorization: "Bearer " + getToken(),
      },
        ruleForm: {
          sharingId: "",
          sharingTitle: "",
          sharingSubtitle: " ",
          sharingIntroduce: "",
          sharingContent: "",
          sharingSign: "",
          coverUrl: "",
          honouredGuest:'',
          isRelease:null,
          isLink:null,
          link:'',
          author:'',
          remark:'',
          Publish:'',
        },
         rules: {
          sharingTitle: [
            { required: true, message: '请输入知识分享活动标题', trigger: 'blur' },
          ],
          sharingSubtitle: [
            { required: true, message: '请输入知识分享活动副标题', trigger: 'blur' },
          ],
          sharingIntroduce: [
            { required: true, message: '请输入活动简介', trigger: 'blur' }
          ],
           isRelease: [
            { required: true, message: '是否发布', trigger: 'change' }
          ],
           isLink: [
            { required: true, message: '是否外链', trigger: 'change' }
          ],
        },
        //编辑器
         content: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`,
         editorOption: {
           placeholder: "请输入内容",
              modules:{
                toolbar:[
                          ['bold', 'italic', 'underline', 'strike'],    //加粗，斜体，下划线，删除线
                          ['blockquote', 'code-block'],     //引用，代码块
                          [{ 'list': 'ordered'}, { 'list': 'bullet' }],     //列表
                          [{ 'indent': '-1'}, { 'indent': '+1' }],     // 缩进
                          [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
                          [{ 'header': [1, 2, 3, 4, 5, 6, false] }],     //几级标题
                          [{ 'color': [] }, { 'background': [] }],     // 字体颜色，字体背景颜色
                          [{ 'font': [] }],     //字体
                          [{ 'align': [] }],    //对齐方式
                          ['clean'],    //清除字体样式
                          ['image','video']    //上传图片、上传视频
                          ]
                      }
         }
      }
      
     },
    methods: {
        onEditorReady(editor) { // 准备编辑器
 
        },
        onEditorBlur(){}, // 失去焦点事件
        onEditorFocus(){}, // 获得焦点事件
        onEditorChange(){}, // 内容改变事件
        //新增
        addUser(){
          addKnowledge(this.ruleForm).then((res)=>{
            console.log(res);
            

          })
        },
        //修改
        update(){
         this.ruleForm = this.$route.query.row;
        uptKnowledge(this.ruleForm).then((res)=>{

        })
        },
        updat(){
         this.ruleForm = this.$route.query.ro;
        uptKnowledge(this.ruleForm).then((res)=>{

        })
        },
        //确定
         submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
          if (this.$route.query.row) {
          this.update();
        } 
        else if(this.$route.query.ro){
            this.updat();
        }
        else {
          this.addUser();
        }
            this.$router.push('/homepageManagement/homepageManagement/knowledge/knowledge');
            
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //取消
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //图片调用
    aaa(response, file, fileList) {
      this.ruleForm.coverUrl = response.fileName;
      console.log(response, file, fileList);
    },
    },
    computed: {
        editor() {
            return this.$refs.myQuillEditor.quill;
        },
    }

}
</script>

<style scope>
    .add{
    margin-top: 30px;
    }
    .el-input__inner {
    height: 30px;
    }
    .el-form-item{
    margin-bottom: 15PX;
    }
    .ql-editor{
    height: 100px;
    }
    .ql-toolbar.ql-snow{
    padding: 0;
    }
    
    .el-textarea__inner{
    line-height: 1;
    }
    .el-button--primary{
    margin-left: 480px;
    }
    .el-upload__text img {
  height: 100px;
  width: 100px;
  border: solid 1px black;
}
::v-deep .el-image__inner {
  width: 15px !important;
}
</style>